<template>
  <div class="vip-tip">
    <div class="vip-text">
      <svg-icon iconClass="crown" className="icon-crown"></svg-icon>
      <span>加入会员，每年预计节约806元</span>
    </div>
    <div class="discount-more" @click="handleToVip">
      <span>5折开卡></span>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'VipTip',
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    handleToVip () {
      this.userInfo.token ? this.$router.push({ name: 'MyVip' }) : this.$router.push({ name: 'Login' })
    }
  }
}

</script>
<style lang='scss' scoped>
.vip-tip {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  padding: 0 px2rem(5);
  margin: 0 px2rem(8);
  border-radius: px2rem(5);
  background-color: $theme-clor-green;
  opacity: .9;
  @include setFontColor(px2rem(10), $text-color-white);
  height: px2rem(35);
  line-height: px2rem(35);
  .vip-text {
    .icon-crown {
      @include setWH(px2rem(18), px2rem(18));
      margin-right: px2rem(8);
      vertical-align: middle;
    }
  }
}
</style>
